@media (max-width: 800px) {
  #listingView .header .name,
  .list .listing-item .name,
  .compact .listing-item .name {
    width: 50%;
  }

  .compact .listing-item div:first-of-type  {
    width: unset !important;
  }

  .list .listing-item .text {
    flex-direction: column;
    align-items: flex-start !important;
    padding-left: 0.5em;
    width: 100%;
  }

  .list .listing-item .text .name,
  .list .listing-item .text .modified,
  .list .listing-item .text .size,
  .list .listing-item .text .duration {
    width: 100% !important;
  }

  .compact .listing-item .text .duration {
    display: none !important;
  }

  .compact .listing-item .name {
    width: 42%;
    padding-left: 0.5em;
  }

  body {
    padding-bottom: 5em;
  }

  #more {
    display: inherit
  }

  body.rtl #dropdown {
    right: unset;
    left: 1em;
    transform-origin: top left;
  }

  header img {
    display: none;
  }

  #listingView {
    margin-bottom: 5em;
  }

  /* Don't override width for gallery and icons views - they use CSS variables */
  #listingView.list .listing-item,
  #listingView.compact .listing-item,
  #listingView.normal .listing-item {
    width: 100%
  }

  /* Gallery mode on mobile - use simple column-based grid */
  #listingView.gallery .folder-items,
  #listingView.gallery .file-items {
    grid-template-columns: repeat(var(--gallery-mobile-columns, 2), 1fr);
  }

  body.rtl #listingView {
    margin-right: unset;
  }

  body.rtl #nav .wrapper {
    margin-right: unset;
  }

  body.rtl .dashboard .row {
    margin-right: unset;
  }
}

/* Mobile Specific Styles */
.mobile-only {
  display: none !important;
}